import React from 'react';
import { Menu } from 'antd';

import './index.less';
import $router from '../../router/routerObj';

interface Props {
  menuItems: {
    path: string;
    text: string;
  }[];
}

function MenuComponet(props: Props) {
  const goToPage = (path: string) => {
    $router.replace(path);
  };

  const renderMenuItems = () => {
    const { menuItems } = props;
    return menuItems.map((item) => (
      <Menu.Item
        key={item.path}
        onClick = {() => { goToPage(item.path); }}
      >
        {item.text}
      </Menu.Item>
    ));
  };

  return (
    <Menu
      className='menu'
      defaultSelectedKeys={[]}
    >
      {renderMenuItems()}
    </Menu>
  );
};

export default MenuComponet;
